<template>
  <div class="content">
    <div class="header">
      <div style="width:20px;height:10px;"></div>
      <el-button type="primary" @click.native="clickadd">
        <i class="el-icon-plus"></i>新建报备
      </el-button>
    </div>
    <div class="seachlist">
      <div class="listitem">
        <div class="itemname">报备日期</div>
        <el-date-picker
          style="width:200px;"
          v-model="paramtime"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </div>
      <div class="listitem">
        <div class="itemname">报备状态</div>
        <el-radio v-model="radio" label>全部</el-radio>
        <el-radio v-model="radio" label="3">已审核</el-radio>
        <el-radio v-model="radio" label="4">未审核</el-radio>
      </div>
      <div class="listitem">
        <div class="itemname">代理商</div>
        <el-input style="width:200px;" v-model="company"></el-input>
      </div>
      <div class="listitem">
        <div class="itemname">广告主</div>
        <el-input style="width:200px;" v-model="customer"></el-input>
      </div>

      <div class="listitem">
        <div class="itemname">预算(万元)</div>
        <el-input style="width:90px;" v-model="down_budget" type="number"></el-input>
        <div class="centers">~</div>
        <el-input style="width:90px;" v-model="height_budget" type="number"></el-input>
      </div>
      <div class="listitem">
        <el-button type="primary" icon="el-icon-search" @click.native="seachclick">搜索</el-button>
      </div>
    </div>
    <div class="pro-list">
      <el-table
        :data="list"
        :cell-style="$rowstyle"
        :header-cell-style="$headerstyle"
        border
        style="width: 100%"
      >
        <el-table-column label="序号" type="index" align="center" width="50"></el-table-column>
        <el-table-column prop="company" align="center" label="代理公司"></el-table-column>
        <el-table-column prop="customer" align="center" label="客户名称"></el-table-column>
        <el-table-column prop="column" label="投放栏目" align="center"></el-table-column>
        <el-table-column prop="budget" label="预算" align="center"></el-table-column>
        <el-table-column prop="progress" label="进度" align="center"></el-table-column>
        <el-table-column prop="name" label="审核状态" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.status==1">草稿</span>
            <span v-if="scope.row.status==2">提交审核</span>
            <span v-if="scope.row.status==3">审核通过</span>
            <span v-if="scope.row.status==4">审核拒绝</span>
          </template>
        </el-table-column>
        <el-table-column prop="get_name.name" label="申请人" align="center"></el-table-column>
        <el-table-column prop="created_at" label="申请日期"></el-table-column>

        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
            <!-- <el-button type="text" size="small">编辑</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="page"
          :page-size="10"
          layout="prev, pager, next, jumper"
          :total="totalnum"
        ></el-pagination>
        <el-button type="primary" style="margin-left:20px;">数据输出</el-button>
      </div>
    </div>
    <!-- addstatus -->
    <div class="prop" v-if="addstatus">
      <div style="height:150px;width:100%"></div>
      <div class="warpprop" style="width:1100px;height:600px;">
        <div class="propheader">
          {{type==1?'录入报备信息':'修改报备信息'}}
          <!-- <p class="close1" >关闭</p> -->
          <el-button class="close1" type="text" @click.native="setstatus">关闭</el-button>
        </div>
        <div class="seachlist">
          <div class="seachlistitem">
            <div class="nameone">代理公司</div>
            <el-input style="width:200px;" v-model="editParam.company"></el-input>
          </div>
          <div class="seachlistitem">
            <div class="nameone">报备日期</div>
            <el-date-picker
              v-model="editParam.time"
              style="width:200px;"
              type="date"
              placeholder="选择日期"
            ></el-date-picker>
          </div>
          <div class="seachlistitem">
            <div class="nameone">申报人</div>
            <el-input style="width:200px;" v-model="editParam.name"></el-input>
          </div>
          <div class="seachlistitem">
            <div class="nameone">申报人电话</div>
            <el-input style="width:200px;" v-model="editParam.phone" maxlength="11"></el-input>
          </div>
          <div class="seachlistitem">
            <div class="nameone">客户名称</div>
            <el-input style="width:200px;" v-model="editParam.customer"></el-input>
          </div>
          <div class="seachlistitem">
            <div class="nameone">客户地址</div>
            <el-input style="width:200px;" v-model="editParam.address"></el-input>
          </div>
          <div class="seachlistitem">
            <div class="nameone">联系人/职务</div>
            <el-input style="width:200px;" v-model="editParam.post"></el-input>
          </div>
          <div class="seachlistitem">
            <div class="nameone">客户类别</div>
            <el-input style="width:200px;" v-model="editParam.type"></el-input>
          </div>
          <div class="seachlistitem">
            <div class="nameone">投放资源</div>
            <el-input style="width:200px;" v-model="editParam.resources"></el-input>
          </div>
          <div class="seachlistitem">
            <div class="nameone">投放栏目</div>
            <el-input style="width:200px;" v-model="editParam.column"></el-input>
          </div>
          <div class="seachlistitem">
            <div class="nameone">投放时间</div>
            <el-date-picker
              v-model="editParam.put_in_time"
              type="month"
              style="width:200px;"
              placeholder="选择月"
            ></el-date-picker>
          </div>
          <div class="seachlistitem">
            <div class="nameone">广告预算</div>
            <el-input style="width:200px;" v-model="editParam.budget"></el-input>
          </div>
          <div class="seachlistitem">
            <div class="nameone">意向位置A</div>
            <el-input style="width:200px;" v-model="editParam.intention_a"></el-input>
          </div>
          <div class="seachlistitem">
            <div class="nameone">意向位置B</div>
            <el-input style="width:200px;" v-model="editParam.intention_b"></el-input>
          </div>
          <div class="seachlistitem">
            <div class="nameone">意向位置C</div>
            <el-input style="width:200px;" v-model="editParam.intention_c"></el-input>
          </div>
          <div class="seachlistitem">
            <div class="nameone">预计完成时间</div>
            <el-date-picker
              v-model="editParam.completion_time"
              type="date"
              style="width:200px;"
              placeholder="选择日期"
            ></el-date-picker>
          </div>
        </div>
        <div class="additem">
          <div class="nameone">项目进度情况</div>
          <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="editParam.progress"></el-input>
        </div>
        <div class="additem">
          <div class="nameone">备注</div>
          <el-input type="textarea" :rows="2" v-model="editParam.remark" placeholder="请输入内容"></el-input>
        </div>
        <div class="additem" style="height:30px;">
          <div class="nameone">状态</div>
          <el-radio v-model="editParam.status" label="1">草稿</el-radio>
          <el-radio v-model="editParam.status" label="2">提交</el-radio>
        </div>
        <!-- <div class="closesee">  <el-button type="primary">关闭</el-button>
        </div>-->
        <div class="savecenter">
          <el-button type="primary" @click.native="editsave">保存</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  addProjectReport,
  getProjectlist,
  getProjectInfo,
  editProjectInfo
} from "../../api/Market.js";
import { SETDATE } from "../../api/System.js";
export default {
  data() {
    return {
      value1: "",
      radio: "",
      company: "",
      customer: "",
      down_budget: "",
      height_budget: "",
      paramtime: [],
      addstatus: false,
      page: 1,
      type: 2,
      totalnum: 0,
      list: [],
      projextId: "",
      editParam: {
        company: "",
        time: "",
        name: "",
        phone: "",
        customer: "",
        address: "",
        post: "",
        type: "",
        resources: "",
        column: "",
        put_in_time: "",
        budget: "",
        intention_a: "",
        intention_b: "",
        intention_c: "",
        completion_time: "",
        progress: "",
        remark: "",
        status: "1"
      }
    };
  },
  created() {
    this.seachlist();
  },
  methods: {
    //
    handleClick(row) {
      this.projextId = row.id;
      getProjectInfo({ id: row.id }).then(res => {
        if (res.code == 200) {
          this.type = 2;
          console.log(res);
          this.editParam.company = res.data.company;
          this.editParam.time = new Date(res.data.time * 1000);
          this.editParam.name = res.data.name;
          this.editParam.phone = res.data.phone;
          this.editParam.customer = res.data.customer;
          this.editParam.address = res.data.address;
          this.editParam.post = res.data.post;
          this.editParam.type = res.data.type;
          this.editParam.resources = res.data.resources;
          this.editParam.column = res.data.column;
          this.editParam.put_in_time = new Date(res.data.put_in_time * 1000);
          this.editParam.budget = res.data.budget;
          this.editParam.intention_a = res.data.intention_a;
          this.editParam.intention_b = res.data.intention_b;
          this.editParam.intention_c = res.data.intention_c;
          this.editParam.completion_time = new Date(
            res.data.completion_time * 1000
          );
          this.editParam.progress = res.data.progress;
          this.editParam.remark = res.data.remark;
          this.editParam.status = res.data.status + "";
          this.setstatus();
        }
      });
    },
    //点击添加
    clickadd() {
      this.type = 1;
      this.setstatus();
    },
    seachclick() {
      this.page = 1;
      this.totalnum = 0;
      this.seachlist();
    },
    //搜索列表
    seachlist() {
      var data = {
        start_time:
          this.paramtime.length > 0
            ? new Date(this.paramtime[0]).getTime() / 1000
            : "",
        end_time:
          this.paramtime.length > 0
            ? new Date(this.paramtime[1]).getTime() / 1000
            : "",
        status: this.radio,
        company: this.company,
        customer: this.customer,
        down_budget: this.down_budget,
        height_budget: this.height_budget,
        per: 10,
        page: this.page
      };
      getProjectlist(data).then(res => {
        if (res.code == 200) {
          this.list = res.data.data;
          this.page = res.data.current_page;
          this.totalnum = res.data.total;
          this.list.forEach(element => {
            element.created_at = SETDATE(element.created_at);
          });
        } else {
          this.list = [];
          this.page = 1;
          this.totalnum = 0;
        }
      });
      console.log(data);
    },
    //添加与编辑时保存

    editsave() {
      console.log(this.editParam);
      if (!this.editParam.company) {
        this.$message({
          message: "代理公司不能为空",
          type: "warning"
        });
        return;
      }
      if (!this.editParam.time) {
        this.$message({
          message: "报备日期不能为空",
          type: "warning"
        });
        return;
      } else {
        this.editParam.time = new Date(this.editParam.time).getTime() / 1000;
      }
      if (this.editParam.put_in_time) {
        this.editParam.put_in_time =
          new Date(this.editParam.put_in_time).getTime() / 1000;
      }
      if (this.editParam.completion_time) {
        this.editParam.completion_time =
          new Date(this.editParam.completion_time).getTime() / 1000;
      }
      if (this.type == 1) {
        addProjectReport(this.editParam).then(res => {
          if (res.code == 200) {
            this.$message({
              message: "录入成功",
              type: "success"
            });
            this.paramtime = [];
            this.radio = "";
            this.company = "";
            this.customer = "";
            this.down_budget = "";
            this.height_budget = "";
            this.page = 1;
            this.totalnum = 0;
            this.seachlist();
            this.setstatus();
          }
        });
      } else {
        let data = { ...this.editParam };
        data.id = this.projextId;
        editProjectInfo(data).then(res => {
          if (res.code == 200) {
            this.$message({
              message: "修改成功",
              type: "success"
            });
            this.paramtime = [];
            this.radio = "";
            this.company = "";
            this.customer = "";
            this.down_budget = "";
            this.height_budget = "";
            this.page = 1;
            this.totalnum = 0;
            this.seachlist();
            this.setstatus();
          }
        });
      }
    },
    setstatus() {
      if (this.addstatus) {
        var obj = {
          company: "",
          time: "",
          name: "",
          phone: "",
          customer: "",
          address: "",
          post: "",
          type: "",
          resources: "",
          column: "",
          put_in_time: "",
          budget: "",
          intention_a: "",
          intention_b: "",
          intention_c: "",
          completion_time: "",
          progress: "",
          remark: "",
          status: "1"
        };
        this.editParam = obj;
      }
      this.addstatus = !this.addstatus;
    },
    handleSizeChange() {},
    handleCurrentChange(e) {
      this.page = e;
      this.seachlist();
    }
  }
};
</script>
<style lang="scss" scoped>
.header {
  height: 40px;
  width: 97%;
  display: flex;
  margin: 0 auto;
  align-items: center;
  flex-direction: row-reverse;
}
.Search {
  display: flex;
  align-items: center;
  margin-left: 30px;
}
.seachlist {
  width: 95%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  .listitem {
    width: 33%;
    margin-top: 10px;
    display: flex;
    align-items: center;
    .itemname {
      width: 90px;
      font-size: 14px;
    }
    .centers {
      width: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
.pro-list {
  width: 95%;
  margin: 0 auto;
  margin-top: 20px;
}
.block {
  float: right;
  margin-top: 10px;
  display: flex;
  align-content: center;
}
.prop {
  width: calc(100% - 210px);
  height: 100%;
  position: fixed;
  top: 0;
  // background: red;
  background: rgba($color: #000000, $alpha: 0.5);
  z-index: 998;
}
.propheader {
  height: 46px;
  width: 100%;
  background: rgba(242, 242, 242, 1);
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  line-height: 46px;
  text-align: center;
  position: relative;
}
.close1 {
  position: absolute;
  right: 10px;
  top: -15px;
  color: #169bd5;
}
.propheader {
  height: 46px;
  width: 100%;
  background: rgba(242, 242, 242, 1);
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  line-height: 46px;
  text-align: center;
  position: relative;
}
.close1 {
  position: absolute;
  right: 10px;
  top: -15px;
  color: #169bd5;
}

.warpprop {
  width: 600px;
  height: 450px;
  // background: blue;
  background: #fff;
  margin: 0 auto;
  border-radius: 10px;
  .seachlist {
    width: 95%;
    margin: 0 auto;
    display: flex;
    .seachlistitem {
      width: 33.3%;
      margin-top: 10px;
      display: flex;
      align-items: center;
      .nameone {
        width: 90px;
        font-size: 14px;
      }
    }
  }
  .additem {
    height: 60px;
    width: 95%;
    margin: 0 auto;
    display: flex;
    margin-top: 10px;
    align-items: center;
    .nameone {
      width: 90px;
      font-size: 14px;
    }
  }
}
.savecenter {
  width: 50px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
}
</style>